<template>
  <div class="questions-search-part">
    <ContainerBox type="primary" class="questions-search">
      <i class="el-icon-search"></i>
      <input type="text" v-model="keyword" placeholder="请输入问题关键词进行搜索"/>
      <div class="search-question-btn" @click="searchQuestion()">点击搜索</div>
      <div class="add-question-btn" @click="addQuestion()">新建提问</div>
    </ContainerBox>
    <QuestionList v-if="!show" ref="list" v-on:getDetail="getQuestionDetail"></QuestionList>
    <QuestionDetail :show="show" ref="detail" v-on:back="show = false"></QuestionDetail>
  </div>
</template>

<script>
import ContainerBox from '../../../box/container_box';
import QuestionList from '../detail/skill_page_questions_list';
import QuestionDetail from '../detail/skill_page_questions_detail';
export default {
  name: "skill_page_questions_search",
  components: {ContainerBox, QuestionList, QuestionDetail},
  data() {
    return {
      show: false,
      keyword: '',
    }
  },
  methods: {
    getQuestionDetail(questionId) {
      this.show = true;
      if (this.$refs.detail) {
        this.$refs.detail.getQuestionsDetail(questionId);
      }
    },
    searchQuestion() {
      this.$refs.list.getQuestionsByKeywords(this.keyword);
    },
    addQuestion: function () {
      // 跳转到新建问题界面
      if (this.$route.query.sectionId) {
        this.$router.push('/skillPage/'+this.$route.params.id+'/questions/editPage/0?sectionId='+this.$route.query.sectionId);
      } else {
        this.$router.push('/skillPage/'+this.$route.params.id+'/questions/editPage/0');
      }
    },
  },
  watch: {
    keyword(after, before) {
      console.log(after);
      if (after === '' || after === null) {
        this.$refs.list.getQuestionsByKeywords(after);
        this.$refs.list.scrollNewQuestions();
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../../.././assets/style/common";
.questions-search-part {
  .questions-search {
    padding-left: 20px;
    display: flex;
    align-items: center;
    input {
      @include input_1();
    }
    .add-question-btn {
      margin-left: 120px;
      @include btn_add();
    }
    .search-question-btn {
      margin-left: 20px;
      @include btn_add();
    }
  }
}
</style>
